<template>
    <el-tabs v-model="activeName">
        <el-tab-pane name="first" label="修改广告">
            <el-form :model="addAdArr" :rules="rules" ref="addAdArr" label-width="100px" class="demo-addAdArr">
                <el-form-item label="广告名称" prop="ad_name">
                    <el-input v-model="addAdArr.adName"></el-input>
                </el-form-item>
                <!--开始日期和结束日期-->
                <el-form-item label="活动日期">
                    <el-col :span="11">
                        <el-form-item prop="ad_create_time">
                            <el-date-picker type="date" placeholder="选择开始日期" style="width: 100%;" value="2020/01/03"></el-date-picker>
                        </el-form-item>
                    </el-col>
                    <!--结束日期-->
                    <el-col :span="11">
                        <el-form-item prop="ad_update_time">
                            <el-date-picker type="date" placeholder="选择结束日期" style="width: 100%;" value="2021/02/03"></el-date-picker>
                        </el-form-item>
                    </el-col>
                </el-form-item>

                <el-form-item label="广告链接" prop="ad_url">
                    <el-input v-model="addAdArr.adUrl"></el-input>
                </el-form-item>
                <el-form-item label="广告图片" prop="img" multiple="false" v-model="addAdArr.adImg">
                    <el-upload
                            ref="pictureUpload"
                            :file-list="fileList"
                            :on-change="handleChange"
                            action="#"
                            list-type="picture-card"
                            :http-request="uploadFile"
                            :auto-upload="false">
                        <i slot="default" class="el-icon-plus"></i>
                        <div slot="file" slot-scope="{file}">
                            <img
                                    class="el-upload-list__item-thumbnail"
                                    :src="(addAdArr.adImg)?('http://172.17.4.241:8887/upload'+addAdArr.adImg):(addAdArr.file=file.url)" alt=""
                            >
                            <span class="el-upload-list__item-actions">
        <span
                class="el-upload-list__item-preview"
                @click="handlePictureCardPreview(file)"
        >
          <i class="el-icon-zoom-in"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleDownload(file)"
        >
          <i class="el-icon-download"></i>
        </span>
        <span
                v-if="!disabled"
                class="el-upload-list__item-delete"
                @click="handleRemove(file)"
        >
          <i class="el-icon-delete"></i>
        </span>
      </span>
                        </div>
                    </el-upload>
                    <el-dialog :visible.sync="dialogVisible">
                        <img width="100%" :src="addAdArr.file" alt="">
                    </el-dialog>
                </el-form-item>
<!--                <el-form-item label="广告排序" prop="ad_sort">-->
<!--                    <el-input v-model="addAdArr.ad_sort"></el-input>-->
<!--                </el-form-item>-->
                <el-form-item label="是否开启" prop="resource">
                    <el-radio-group v-model="addAdArr.adStatus">
                        <el-radio v-model="addAdArr.adStatus" :label="0">开启</el-radio>
                        <el-radio v-model="addAdArr.adStatus" :label="1">关闭</el-radio>
                    </el-radio-group>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="submitForm('addAdArr')">立即跟新</el-button>
                    <el-button @click="resetForm('addAdArr')">取消</el-button>
                </el-form-item>
            </el-form>
        </el-tab-pane>
    </el-tabs>
</template>

<script>
    export default {
        name: "updateAdvertisement",
        data() {
            return {
                addAdArr: {
                    adName: '',//广告名称
                    adUrl: '',//广告链接
                    adImg: '',//广告图片//
                    adStatus: '',//广告显示状态
                    ad_is_deleted: '',//是否删除
                    ad_sort: '',//广告排序
                    ad_create_time: '',//创建时间
                    ad_update_time: ''
                },
                fileList: [{name: '', url: ''}],//设置默认图片地址
                rules: {
                    adName: [
                        {required: true, message: '请输入广告名称', trigger: 'blur'},
                        {min: 3, max: 20, message: '长度在 3 到 20 个字符', trigger: 'blur'}
                    ],
                    ad_sort: [{
                        required: true, message: '请填写广告排序', trigger: 'blur'
                    }],
                    adStatus: [
                        {required: true, message: '请选择是否开启广告', trigger: 'change'}
                    ],
                    adUrl: [
                        {required: true, message: '请填写广告链接', trigger: 'blur'}
                    ]
                },
                dialogVisible: false,
                disabled: false,
                file: '',
                id:'',
                activeName: 'first', //tabs默认选择first
                change:1
            }
        },
                methods: {
                    uploadFile(file){
                        this.fileList[0]={

                        }
                        console.log(file)
                        // this.formData.append('file',file.file);
                    },
                    handleChange(file, fileList) {
                        this.change=2
                        this.fileList = fileList;
                    },
                //创建submit提交请求创建
                submitForm(addAdArr) {

                    //构造formData
                    let formData = new FormData()
                    console.log(this.fileList)
                    formData.append('file',this.fileList[0].raw)



                    this.$refs[addAdArr].validate((valid) => {
                        if (valid) {
                            if (this.change==1){
                                this.$axios({method:'post',url:'/api/ad/edit', params:{adId:this.addAdArr.adId,adName:this.addAdArr.adName,adUrl:this.addAdArr.adUrl,adStatus:this.addAdArr.adStatus},
                                    // data:formData
                                }).then((res)=>{
                                    console.log(res)
                                    this.$router.push({name:'advertisement'})
                                }).catch((err)=>{
                                    console.log(err)
                                })
                                console.log(this.addAdArr)
                            }else{
                                this.$axios({method:'post',url:'/api/ad/edit', params:{adId:this.addAdArr.adId,adName:this.addAdArr.adName,adUrl:this.addAdArr.adUrl,adStatus:this.addAdArr.adStatus},
                                    data:formData
                                }).then((res)=>{
                                    console.log(res)
                                    this.$router.push({name:'advertisement'})
                                }).catch((err)=>{
                                    console.log(err)
                                })
                                console.log(this.addAdArr)
                            }
                        } else {
                            console.log('error submit!!');
                            return false;
                        }
                    });
                },
                //返回按钮
                resetForm(addAdArr) {
                    this.$router.push({name:'advertisement'})
                    this.$refs.addAdArr.resetFields()
                },
                //删除图标的方法
                handleRemove(file) {
                    this.$refs.pictureUpload.uploadFiles = []
                    this.addAdArr.adImg=''
                },
                //预览
                handlePictureCardPreview(file) {
                    this.addAdArr.ad_img = file.url;
                    this.dialogVisible = true;
                },
                //下载方法
                handleDownload(file) {
                    console.log(file);
                }
            },
        created(){

            console.log(this.$route.query.arr)
            this.addAdArr=JSON.parse(sessionStorage.getItem('arr'))
            //发起请求让后台将对应id的数据查找传进
            // this.$axios.post('/api/articleList',{ad_id:this.$route.query.id}).then((res)=>{
            //     console.log(res)
            //     this.addAdArr={
            //         ad_name: 'haha',//广告名称
            //             ad_url: '212135151',//广告链接
            //             ad_img: '',//广告图片//
            //             ad_status: '1',//广告显示状态
            //             ad_is_deleted: '0',//是否删除
            //             ad_sort: '20',//广告排序
            //             ad_create_time: '',//创建时间
            //             ad_update_time: ''
            //     }
            //     this.fileList[0].url='https://ss1.bdstatic.com/70cFvXSh_Q1YnxGkpoWK1HF6hhy/it/u=756258046,2809017249&fm=26&gp=0.jpg'
            // }).catch((err)=>{
            //     console.log(err)
            // })
        }
    }
</script>

<style scoped>
    .el-form{
        width: 40%;
        overflow: hidden;
        padding-left: 20px;
    }
    .el-form-item{
        text-align: left;
    }
</style>